Курс по JavaScript - основы 2017

Урок 0. Введение:
В данное время очень сложно отыскать сайт в интернете, на котором не используется функционал языка JavaScript. Используя, данный язык веб-программирования, на страницах веб-сайтов отображаются различные галереи и слайдеры изображений, интерактивные ссылки и кнопки, реализуется отправка данных на сервер без перезагрузки страницы, выполняется формирование и отображение дополнительных данных, реализуется логика, которая может быть выполнена только на стороне клиента, осуществляется математические расчеты различных данных, и предварительная проверка отправляемой на сервер информации и т.д.
Поэтому я хотел бы представить Вашему вниманию онлайн курс – основы JavaScript программирования. Это теоретический курс, в котором, мы от простого к сложному, изучим основные моменты данного языка веб-программирования.
Просмотрев данный курс, Вы изучите синтаксис языка JavaScript, научитесь работать с переменными, манипулировать различными типами данных, узнаете, что такое выражения, инструкции, функции, объекты, массивы. Научитесь работать со строками, датой и временем, вести математические расчеты. И, конечно же, научитесь выбирать элементы HTML страниц при помощи JavaScript, что позволит добавлять либо изменять содержимое выбранных элементов. То есть осуществлять взаимодействие скрипта с HTML страницей сайта.


Урок 1. Введение в язык JavaScript. Синтаксис. Переменные:
От автора: в данное время очень сложно отыскать сайт в интернете, на котором не используется функционал языка JavaScript. Используя, данный язык веб-программирования, на страницах сайтов, отображаются различные галереи и слайдеры изображений, интерактивные ссылки и кнопки, реализуется отправка данных на сервер без перезагрузки страницы, выполняется формирование и отображение дополнительных данных, реализуется логика, которая может быть выполнена только на стороне клиента, осуществляется математически расчет различных данных, и предварительная проверка отправляемой на сервер информации.
Поэтому, с данного урока, мы начинаем небольшой курс по изучению языка веб-программирования JavaScript.
По итогам данного урока Вы узнаете, что такое язык JavaScript, как формируется его код, ознакомитесь с основным синтаксисом, познакомитесь с основными типами данных, а также научитесь создавать переменные, и выполнять простейшие манипуляции с ними.


Урок 2. Типы данных в JavaScript:
От автора: в прошлом вводном уроке мы с Вами изучили основной синтаксис и кратко затронули очень важную тему – типы данных в языке JavaScript. В данном уроке мы более подробно рассмотрим данную тему, а также поговорим о тех операциях, которые мы вправе выполнять над каждым из типов данных.
По итогам данного урока Вы изучите основные базовые типы данных языка JavaScript. А так же научитесь использовать операторы для выполнения арифметических и логических операций над данными различных типов.


Урок 3. Условные инструкции в JavaScript. Инструкции циклов и переходов:
От автора: на прошлом уроке мы с Вами достаточно подробно поговорили о простейших типах данных и научились использовать операторы, для выполнения различных операций над каждым из типов — то есть научились формировать выражения. И, начиная с данного урока, мы приступаем к изучению более сложных вещей языка, которые используются для формирования логики скриптов. Сегодня мы подробно рассмотрим понятие javascript инструкции, о котором я говорил на прошлом уроке, изучим условные инструкции, инструкции циклов, а также инструкции переходов.
По итогам данного урока Вы узнаете, что такое условные инструкции, каких видов они бывают, и как с их помощью реализовать логические ветвления программного кода. Также Вы научитесь, по определенным условиям, циклически выполнять отдельные участки кода, используя инструкции циклов.


Урок 4. JavaScript функции:
От автора: достаточно часто при создании скриптов, необходимо один и тот же участок кода, использовать многократно с различным набором входных параметров. Конечно, решить данную задачу достаточно просто, путем копирования одного и того же участка кода и проставления его в нужных местах. Но это не совсем удобно в использовании, не совсем красиво, да и в программировании так не принято. Поэтому в данном уроке мы с Вами подробно познакомимся с понятием javascript функции.
По итогам данного урока Вы узнаете, что такое функции, по какому принципу они работают, какими способами, возможно определить функцию в скрипте и как именно вызвать на исполнение. Так же мы рассмотрим такое понятие как рекурсия и поговорим об области видимости переменных.


Урок 5. Массивы в JavaScript:
От автора: разрабатывая веб-приложения, так или иначе, необходимо работать с определенным количеством данных. При этом необходимая информация располагается в соответствующих переменных и по мере работы скрипта к ним выполняется обращение. Но что делать если большой объем разнообразной информации необходимо передать в некую точку, к примеру, в другой скрипт, или же в качестве параметра при вызове функции и т.д. В этом случае использовать раннее сформированные переменные не совсем удобно, особенно если их очень много. Поэтому в данном уроке мы рассмотрим JavaScript массивы, которые значительно упрощают работу с большим количеством информации.
По итогам данного урока Вы узнаете, что такое массивы и как с их помощью можно удобно работать с большим количеством различных данных. А так же научитесь создавать, изменять, удалять и обходить в цикле элементы массивов.


Урок 6. Методы работы с массивами:
От автора: на прошлом уроке Вы познакомились с массивами и скорее всего оценили их значимость и возможности, которые они предоставляют в работе с данными. Сегодня мы изучим основные методы доступные в языке JavaScript для работы с массивами. А так же познакомимся с разновидностью цикла for, который значительно упрощает обход массивов.
По итогам данного урока Вы узнаете, какие методы предоставляет JavaScript для работы с массивами. Вы научитесь удалять и добавлять элементы в определенные позиции, осуществлять поиск заданного значения и раскладывать массив в строку, объединять элементы массива в одно значение, сортировать с использованием различных алгоритмов, а так же описывать функции, которые будут вызываться для каждой ячейки массива.


Урок 7. Дата и время в интерпретаторе JavaScript:
От автора: создавая веб приложения очень часто приходится работать с датой и временем, к примеру создание обычных часов, таймера обратного отсчета, вычисление разности между временными метками и т.д. Соответственно каждый язык программирования по данной теме предлагает собственные инструменты и решения, и конечно же JavaScript не исключение. Поэтому в данном видео мы научимся работать с датой и временем.
По итогам данного урока Вы узнаете, в каком виде представлены дата и время в интерпретаторе JаvaScript, как сформировать объект для текущей и произвольной даты, как узнать разницу между отдельными метками времени, а также научитесь получать и изменять отдельные элементы даты и времени.


Урок 8. Инструменты JavaScript. Работа со строками:
От автора: в течение прошлых уроков, мы так или иначе сталкивались со строками, то есть со значениями строкового типа данных. Поэтому в данном уроке мы изучим инструменты JavaScript, благодаря которым Вы сможете выполнять различные манипуляции с вышеуказанным типом данных.
По итогам данного урока вы научитесь работать со строками, а именно осуществлять поиск необходимого значения в строке, получать из некоторой строки, интересующий фрагмент, а также проводить поиск или замену, в соответствии с шаблоном регулярного выражения.


Урок 9. Математические преобразования:
От автора: ни одно веб-приложение не обходится без использования чисел. При этом числовые значения используются как для хранения и отображения некоторых величин, так и для различных преобразований и дальнейшего формирования новых значений. И возможно преобразования в другие не числовые типы – строковые логические и т.д. Поэтому сегодня у нас так сказать математический урок, где мы будем изучать методы JavaScript, которые реализуют различные преобразования над числами.
По итогам данного урока вы изучите объект JavaScript Math() и его доступные методы, предназначенные для выполнения различных преобразований с числовыми значениями.


Урок 10. Объекты. Часть 1:
От автора: на прошлых уроках мы с Вами неоднократно вспоминали такое понятие как объекты JavaScript, но подробно на данной теме не останавливаюсь. А значит давайте это исправим, тем более, что объекты – это фундаментальный тип данных, без которого не возможно создать действительно хороший проект.
По итогам данного урока вы узнаете, что такое объект и в чем его особенность, по сравнению с другими типами данных. Научитесь создавать, собственные объекты и их свойства, а так же увидите как объекты прототипы расширяют функционал созданного объекта.


Урок 11. Объекты. Часть 2:
От автора: в данном уроке мы с Вами продолжим рассматривать объекты JavaScript так много очень важных моментов, мы с Вами не успели изучить в прошлом видео. Вы научились создавать собственные свойства, но помимо них, объект характеризуются методами, о создании которых мы будем говорить сегодня.
По итогам данного урока вы научитесь создавать собственные методы объектов, функции конструкторы, свойства с методами доступа, а так же узнаете, как проверить существование определенного свойства у некого класса.


Урок 12. Объект JavaScript Window. Часть 1:
От автора: приветствую Вас дорогой друг. В данном уроке мы с Вами начнем рассматривать глобальный объект Javascript Window, который сосредотачивает в себе абсолютно все возможности и прикладные интерфейсы клиентского JavaScript.
При этом определимся, для начала, с тем, что это за объект и как с ним можно работать, далее на практике рассмотрим методы, благодаря которым в JavaScript реализуются различные таймеры и планируется отложенное выполнение определенных функций и наконец, познакомимся с методами, формирующими различные модальные диалоговые окна.
Данный урок, в основном будет практическим, так как мы с Вами реализуем несложный скрипт, появления на экран всплывающего блока с произвольной информацией. При этом указанный блок будет показываться на экран через определенный промежуток времени и с использованием анимационного эффекта – плавное изменение прозрачности, который мы самостоятельно опишем.
Таким образом Вы научитесь применять таймеры, планировать запуск на исполнение функций через определенное время и познакомитесь с методами ввода вывода информации при помощи модальных окон.


Урок 13. Объект JavaScript Window. Часть 2:
От автора: приветствую Вас дорогой друг. В данном уроке мы продолжим рассматривать глобальный объект Window, более подробно поговорим о вкладках, окнах и плавающих фреймах, рассмотрим пути взаимодействия между ними, а так изучим некоторые полезные методы указанного объекта.
По итогам данного урока Вы научитесь открывать и закрывать окна или вкладки браузера, управлять размерами и положением окон и главное выполнять взаимодействие между отдельными окнами или вкладками, а так же плавающими фреймами.


Урок 14. Объекты Location, Navigation, History, Screen:
От автора: как Вы помните, мы уже два урока подряд рассматриваем глобальный объект Window, который является сосредоточением основных прикладных интерфейсов клиентского JavaScript. В данном видео мы поговорим о свойствах location, history, navigator и screen которые ссылаются на соответствующие объекты и определяют достаточно интересные инструменты, которые часто используются при создании различных скриптов.
По итогам данного урока Вы узнаете, как работать с URL адресом, как выполнять перемещения по страницам, информация о которых хранится в истории, а так же как узнать параметры браузера и экрана пользователя.


Урок 15. Объект Document. DOM. Выборка HTML элементов:
От автора: начиная с данного урока, мы приступаем к изучению очередного глобального объекта под названием объект Document, который представляет непосредственно конкретный документ, то есть содержимое, которое отображается или будет отображаться в окне браузера. При этом данный объект, по сути не является автономным, так как представляет собой центральный объект достаточно сложного API, известного как объектная модель документа или DOM, о которой мы поговорим в данном уроке.
По итогам данного урока Вы изучите некоторые основные свойства объекта document , увидите что собой представляет и из каких элементов состоит объектная модель документа, а так же научитесь выбирать HTML элементы страницы, используя методы объекта document.


Урок 16. Навигация по дереву DOM:
От автора: в данном видео мы продолжаем изучать объект Document и рассматривать методы благодаря которым можно перемещаться по дереву DOM определенного документа. А именно, узнаем как выбирать элементы страниц, используя селекторы CSS, а так же поговорим о навигации по документу и о работе с атрибутами HTML элементов.
По итогам данного урока Вы узнаете, какие методы определены в объекте Document по выбору элементов HTML страниц, используя стандартные селекторы каскадных таблиц стилей CSS, а так же научитесь перемещаться по дереву DOM относительно произвольного выбранного элемента, при этом Вы рассмотрите такие понятия как родительский, дочерний и братский элемент или узел.


Урок 17. Работа с содержимым HTML элементов:
От автора: текстовое содержимое страницы, для разработчиков, представляет наибольший интерес, так как именно оно в конечном счете подлежит изменению, к примеру, добавление новой информации, изменение при определенных действия пользователя и т.д. Поэтому в данном видео мы с Вами научимся работать с содержимым HTML элементов, как в виде простого текста, в виде объектов Element так и в виде отдельных узлов. А так же поговорим о создании замене и удалении узлов документа.
По итогам данного урока Вы узнаете, как получить доступ к текстовому содержимому определенных HTML элементов страницы, а так же научитесь создавать новые узлы и располагать их в необходимом месте документа.


Урок 18. Работа с формами JavaScript:
От автора: формы языка-разметки HTML, занимают очень важное место в клиентских проектах, так как позволяют принимать различные данные от пользователей. Поэтому в данном видео мы с Вами научимся работать с данными элементами, используя инструменты JavaScript, и тем самым закончим знакомство с глобальным объектом Document.
По итогам данного урока Вы научитесь выбирать как целые формы, так и их составные элементы, то есть отдельные поля. При этом мы поговорим об особенностях некоторых наиболее часто используемых элементах формы и, конечно же, Вы узнаете, как получить данные добавленные в поля, как их изменить и как из скрипта отправить всю форму по указанному адресу.


Урок 19. Обработка событий в JavaScript:
От автора: клиентские скрипты языка JavaScript основаны на модели, когда работа программы управляется событиями, при такой модели браузер генерирует определенные события, когда с документом что то происходит, либо же пользователь выполняет определенные действия. Поэтому начиная с данного урока, мы с Вами приступаем к изучению событий, и будем учиться их обрабатывать. Непосредственно в текущем видео, мы поговорим об основных понятиях данной темы, а так же рассмотрим четыре способа регистрации обработчиков событий.


Урок 20. Аргументы обработчиков событий. Отмена событий:
От автора: в данном видео мы продолжаем говорить о событиях, а именно рассмотрим аргументы, передаваемые в обработчики, контекст обработчиков событий, область видимости функций обработчиков, порядок их вызова, а так же возвращаемые значения и напоследок изучим способы по отмене событий.


Урок 21. Фазы распространения событий:
От автора: в данном видео мы рассмотрим фазы распространения событий, такие как всплытие событий javascript и их перехват. Тема не сложная, но очень важная, так как ее понимание значительно упростит формирование интерактивных приложений.


Урок 22. JavaScript. События мыши:
От автора: изучив фазы распространения событий, пришло время познакомиться с событиями различных элементов веб-страниц, и начнем с изучения события мыши в JavaScript. При этом перечень доступных событий мы с Вами рассмотрим, достаточно обзорно, так как они очень просты для понимания, и оставшееся время, потратим на практическую часть, а именно мы с Вами реализуем не сложный механизм буксировки определённого элемента, используя мышь пользователя.
По итогам данного урока Вы узнаете, какие события мыши мы можем обрабатывать при помощи JavaScript, а так же создадите не сложный скрипт буксировки определенного элемента в пределах веб-страницы.


Урок 23. JavaScript. События клавиатуры и элементов форм:
От автора: в данном видео мы с Вами закрываем достаточно объемную тему под названием события и нам осталось рассмотреть события клавиатуры и элементов форм в JavaScript. Причем некоторые из них мы уже рассматривали на предыдущих уроках, а значит, сегодня мы закрепим знания и, конечно же, изучим новые.
По итогам данного урока Вы узнаете, как обрабатывать события клавиатуры и как работать с вводимым текстом, а так же как отслеживать изменения элементов форм в JavaScript.


Урок 24. JavaScript. Работа с Ajax:
От автора: в данном уроке мы с Вами рассмотрим, работу с методом AJAX, используя инструменты языка JavaScript. При этом мы изучим только основы, потому как работать с этим методом значительно удобнее используя фреймворки, к примеру, библиотеку jQuery. Но этого будет вполне достаточно, для того что бы Вы понимали, что это за технология, как она работает, как отправить определенный запрос, с указанным набором данных и конечно же, как получить ответ и вывести его на экран.